|
a标签有四个伪类，分别是 a:link 未点击，a:visited已点击，a:hover 悬停，a:active 已激活;
在使用这四个伪类时一定要注意顺序，否则不会生效。 如下代码：visited伪类中颜色属性已经生效了，但是font-size属性却不生效,。而其它伪类中的font-size属性却可以生效。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 未点击*/
a:link{
color:black;
font-size:10px;
}
/* 已点击*/
a:visited{
color:orange;
font-size: 28px;
}
/* 悬停*/
a:hover{
color:red;
font-weight: bold;
font-size: 48px;
}
/* 激活*/
a:active{
color:orange;
font-size:38px;
}
</style>
<body>
<a href="http://baidu.com" target="_blank">baidu.com</a>
<a href="http://bugshouji.com" target="_blank">baidu.com</a>
</body>
</html>问：为会a标签的visited的伪类font-size等一些属性不生效呢？然后，又试了一下font-weight,line-height等属性，发现都不生效。然后，查阅了一下文档，才发现。原因： 出于隐私考虑，浏览器严格限制可以使用该伪类选择（即visited）的元素应用的样式：仅颜色、背景色、边框颜色、边框底端颜色、边框左端颜色、边框右端颜色、边框顶面颜色、轮廓颜色等等，即color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color。 并且，虽然颜色可以更改，但getComputedStyle方法获取样式将有误，不能根据伪类状态来显示对应的样式，而是始终返回未访问颜色的值。 Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used).Though the color can be changed, the method getComputedStyle will lie and always give back the value of the non-visited color.For more information on the limitations and the motivation for them, see Privacy and the :visited selector.来源：https://developer.mozilla.org/en-US/docs/Web/CSS/:visited 参考：https://stackoverflow.com/questions/38550677/how-to-change-the-font-size-of-an-a-tag-after-its-been-visited?r=SearchResults |
|
|
公众号
